<template>
    <div>
        <div class="container">
            <div class="m-main">
                <div class="m-top">
                    <div class="top-img">
                        <img src="../../../../static/images/logo_housekeeper.png" alt="">
                    </div>
                    <div class="top-detail">
                        <div class="d-name text-overflow">厦门团带互联网科技有限公司</div>
                        <div class="d-situation">
                            <span class="state">在企</span>
                            <span class="type">高新技术企业</span>
                        </div>
                        <div class="d-data">
                            <div class="data-line">
                                <div class="l-left">电话：0592-xxxxxxxxx</div>
                                <div class="l-right">官网：http://www.tuandai.com</div>
                            </div>
                            <div class="data-line">
                                <div class="l-left">邮箱：2462</div>
                                <div class="l-right">地址：厦门市湖里区湖里大道33号</div>
                            </div>
                            <div class="data-line">
                                企业简介：团贷网｜团贷投资平台（tuandai.com,以下简称“团贷网投资平台”）成立于2011年,并于2012年正式…
                                <span>[查看详情]</span>
                            </div>
                        </div>
                        <div class="d-tip">
                            <div class="tip-con">
                                <span><img src="../../../../static/images/warn.png" alt=""></span>
                                <span class="text">请企业录入完善信息，我们将根据每家企业的实际情况进行服务推送，谢谢！</span>
                            </div>
                            
                        </div>
                    </div>
                </div>

                <div class="m-content">
                    <div class="m-tabs">
                        <div class="m-tab" :class="{'on':showTab===0}" @click="ShowTab(0,'IntellectualProperty')">知识产权信息</div>
                        <div class="m-tab" :class="{'on':showTab===1}" @click="ShowTab(1,'TechnologyProject')">科技项目信息</div>
                        <div class="m-tab" :class="{'on':showTab===2}" @click="ShowTab(2,'SeniorityCertificate')">资质证书信息</div>
                        <div class="m-tab" :class="{'on':showTab===3}" @click="ShowTab(3,'MyPolicy')">我的政策</div>
                    </div>

                    <div class="tab-content">
                        <component :is="componentId"></component>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import IntellectualProperty from './IntellectualProperty';
import TechnologyProject from './TechnologyProject';
import SeniorityCertificate from './SeniorityCertificate';
import MyPolicy from './MyPolicy';

export default {
    data(){
        return{
            showTab:3,//显示第几个tab
            componentId:'MyPolicy',
        }
    },
    methods:{
        //点击tab
        ShowTab(tab,item){
            this.showTab=tab;
            this.componentId = item;
        },
    },
    components:{
        IntellectualProperty,
        TechnologyProject,
        SeniorityCertificate,
        MyPolicy,
    }
}
</script>
<style lang="less" scoped>
    .container{
        background: #F3F3F3;
        padding: 50px 10px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        .m-main{
            padding: 50px 10px 30px;
            .m-top{
                // padding: 0 45px;
                padding: 50px 45px 90px;
                background: #fff;
                .top-img{
                    display: inline-block;
                    width: 218px;
                    height: 218px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .top-detail{
                    float: right;
                    width: 753px;
                    position: relative;
                    .d-name{
                        font-size: 24px;
                        color: #333;
                        line-height: 24px;
                        margin-bottom: 20px;
                        width: 55%;
                    }
                    .d-situation{
                        font-size: 16px;
                        border-bottom: 1px solid #E0E0E0;
                        height: 40px;
                        .state{
                            color: #666666;
                        }
                        .type{
                            color: #E60012;
                            margin-left: 30px;
                        }
                    }
                    .d-data{
                        margin-top: 15px;
                        .data-line{
                            color: #666666;
                            font-size: 16px;
                            .l-left,.l-right{
                                display: inline-block;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                            .l-left{
                                width: 40%;
                            }
                            &>span{
                                color: #1575F9;
                            }
                        }
                    }
                    .d-tip{
                        position: absolute;
                        background: url(../../../../static/images/tip.png);
                        top: 0px;
                        right: 0px;
                        width: 334px;
                        height: 56px;
                        .tip-con{
                            padding: 13px 10px 13px 30px;
                            .text{
                                font-size: 12px;
                                color: #999999;
                                float: right;
                                width: 85%;
                                line-height: 15px;
                            }
                            img{
                                width: auto;
                            }
                        }
                    }
                }
            }
            .m-content{
                
                .m-tabs{
                    display: flex;
                    border-bottom: 1px #ebeef5 solid;
                    border-top: 1px #ebeef5 solid;
                    z-index: 2;
                    background: #fff;
                    .m-tab{
                        flex: 1;
                        text-align: center;
                        height: 80px;
                        line-height: 80px;
                        position: relative;
                        color: #1575F9;
                        font-size: 24px;
                        &:hover{
                            cursor:pointer;
                        }
                        &.on{
                            // background: #1575F9;
                            background:linear-gradient(rgb(150, 176, 212),#1575F9);
                            color: #fff;
                            &:after{
                                width: 0;
                            }
                        }
                        &:after{
                            content: '';
                            position: absolute;
                            right: 0;
                            width:1px;
                            height:60px;
                            top: 10px;
                            background:linear-gradient(0deg,rgba(21,117,249,0) 0%,rgba(21,117,249,1) 50%,rgba(21,117,249,0) 100%);
                        }
                        &:last-child{
                            &:after{
                                width: 0;
                            }
                        }
                    }
                }
                .tab-content{

                }
            }
        }
    }
</style>
